<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>




    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }

        .part-6 header {
            width: 100%;
            position: sticky;
            top: 0px;
        }
        .part-6 img{
            width: 96%;
        }

        .part-6 .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        .part-6 header:before {
            content: "";
            position: absolute;
            z-index: -1;
            background-color: rgba(255, 255, 255, 0.22);
            -webkit-backdrop-filter: blur(11px);
            backdrop-filter: blur(11px);
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .part-6 header ul ul {
            display: none;
            position: absolute;
            padding: 10px;
            border-radius: 8px;
            top: 70px;
            width: 200%;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.22);
        }

        .part-6 header ul ul b {
            padding: 0px 20px;
            display: block;
        }

        .part-6 header ul ul b:hover {
            background: #0B62D2;
            border-radius: 8px;
        }

        .part-6 header ul {
            display: flex;
            justify-content: space-around;
            font-size: 22px;
            font-weight: bolder;
        }

        .part-6 header ul li {
            /* 重要 */
            line-height: 60px;
            height: 60px;
            width: 25%;
            text-align: center;
            position: relative;
        }

        .part-6 .active {
            display: block;
        }

        .part-6 .one-level ul {
            display: block;
        }
    </style>
    <div class="part-6">
        <header>
            <ul>
                <li class="header_li " onclick="openLi(this)">Microsoft
                    <ul class="second_menu">
                        <b onclick="b_click()">Surface Laptop</b>
                        <b onclick="b_click()">Laptop Studio</b>
                        <b onclick="b_click()">Microsoft 365</b>
                    </ul>
                </li>
                <li class="header_li " onclick="openLi(this)">Apple
                    <ul class="second_menu">
                        <b onclick="b_click()">iPhone SE2</b>
                        <b onclick="b_click()">MacBook Pro</b>
                        <b onclick="b_click()">iPad mini 5</b>
                    </ul>
                </li>
                <li class="header_li " onclick="openLi(this)">Tesla
                    <ul class="second_menu">
                        <b onclick="b_click()"> Model 3 </b>
                        <b onclick="b_click()"> Model Y </b>
                        <b onclick="b_click()">Model S </b>
                    </ul>
                </li>
                <li class="link4 " onclick="openLi(this)">link4    </li>
            </ul>
        </header>
        
    <img src="img/Tesla (11).jpeg" alt="">
    <img src="img/Tesla (12).jpeg" alt="">
    <img src="img/Tesla (13).jpeg" alt="">
    <img src="img/Tesla (18).jpeg" alt="">
    <img src="img/Tesla (16).jpeg" alt="">
    </div>
    <script>

        function toggle_active(eee, action) {
            for (var i = 0; i < eee.length; i++) {
                if (eee[i].nodeName === "UL" && eee[i].classList.contains("second_menu")) {
                    if (action == "remove") {
                        eee[i].classList.remove('active')
                    }
                    if (action == "toggle") {
                        eee[i].classList.toggle('active')
                    }
                }
            }
        }
        function openLi(eee) {
            let header_li = document.getElementsByClassName("header_li");
            for (let i = 0; i < header_li.length; i++) {
                if (eee == header_li[i]) {
                    toggle_active(header_li[i].childNodes, "toggle")
                } else {
                    toggle_active(header_li[i].childNodes, "remove")
                }
            }
        }
        function b_click(ee) {
            var ev = ee || window.event;
            if (ev && ev.stopPropagation) {
                //非IE浏览器
                ev.stopPropagation();
            } else {
                //IE浏览器(IE11以下)
                ev.cancelBubble = true;
            }
        }
    </script>






</body>

</html>